<template>
	<view class="box">
		<!-- 头像区域 -->
		<view class="login">
			<view class="login_portrait" @click="remote">
				<image src="/static/my/621.png" mode=""></image>
			</view>
			<view class="login_portrait_text">
				<view class="login_portrait_text_ID" v-if="!isLogin">{{'点击登录'}}</view>
				<view class="login_portrait_text_ID" v-if="isLogin">{{ 'ID:' + userid }}
					<image style="width: 33rpx;height: 33rpx;margin-left: 20rpx;" src="/static/my/copy.png" mode=""
						@click="copyId(userid)">
					</image>
				</view>
				<view class="login_portrait_text_VIP">
					{{ !isVip ?    '可使用次数：' + coins + '条':'到期时间：' + vip.vipendtime  }}
				</view>
			</view>
			<view class="refresh" @click="refreshNum">{{ refresh }}</view>
		</view>

		<view class="enlighten_vip">

			<!-- <button class="button" @click="goMember" default>{{isVip ? '查看权限' : '会员中心'}}</button> -->
			<image src="/static/my/hys.png" mode="widthFix" @click="goMember">
			</image>
		</view>
		<view class="vip-s">
			<view class="vip-s_left" @click="gomytitle">
				<image src="../../static/fish/wa.png" style="height: 64rpx; width: 64rpx;" mode="">
				</image>
				<text>我的文案</text>
			</view>
			<view class="vip-s_right" @click="goMoney">
				<image src="../../static/my/19.png" style="height:64rpx; width: 64rpx;" mode="">
				</image>
				<text>智能写作</text>
			</view>
		</view>

		<!--  -->
		<view class="cell_group">
			<u-cell-group>
				<u-cell @click="goMember" title="会员充值" :border="false" :isLink="true" size="large">
					<u-icon slot="icon" size="24" name="/static/my/13.png"></u-icon>
				</u-cell>
				<u-cell title="消费记录" :isLink="true" :border="false" size="large" @click="goConsumption">
					<u-icon slot="icon" size="24" name="/static/my/12.png"></u-icon>
				</u-cell>
				<u-cell title="联系客服" :isLink="true" :border="false" size="large" @click="toggle">
					<u-icon slot="icon" size="24" name="/static/my/11.png"></u-icon>
				</u-cell>
				<button open-type="im" :data-im-id="imId" id="btn"></button>

				<!-- <u-cell @click="setUp" title="设置" :border="false" :isLink="true" size="large">
					<u-icon slot="icon" size="24" name="/static/my/sz.png"></u-icon>
				</u-cell> -->
			</u-cell-group>
		</view>
		<!-- <view class="cell_group">
			<u-cell-group>
				<u-cell title="联系客服" :isLink="true" :border="false" size="large" @click="goService">
					<u-icon slot="icon" size="24" name="/static/my/kf.png"></u-icon>
				</u-cell>
				<u-cell @click="about" title="关于" :border="false" :isLink="true" size="large">
					<u-icon slot="icon" size="24" name="/static/my/gy.png"></u-icon>
				</u-cell>
				<u-cell @click="setUp" title="设置" :border="false" :isLink="true" size="large">
					<u-icon slot="icon" size="24" name="/static/my/sz.png"></u-icon>
				</u-cell>
			</u-cell-group>
		</view> -->
		<u-popup :show="isCouponPopUp" @close="isCouponPopUp = false" mode="center" :round="18">
			<view class="CouponPopUp_box">
				111111111111111111111
			</view>
		</u-popup>
		<view class="version">{{version}}</view>

	</view>
</template>

<script>
	import {
		apiMixUrlApi,
		apiMixUrlKeyApi
	} from "@/api/assemb";
	import {
		isLogin,
		vipType,
		dologin
	} from '@/business/login.js';
	import {
		grayControl
	} from '@/utils/grayControl.js'
	export default {
		data() {
			return {
				coins: 0,
				version: '',
				imId: '57475741013',
				src: '/static/my/tx_w.png',
				isLogin: false, //是否登录
				isVip: false, //是否会员
				vip: {}, //会员 信息
				UserProfile: '', // 微信 用户信息
				userid: '', // 获取用户id
				refresh: '刷新会员',
				currentTime: 11,
				tit: 0
			};
		},
		onShow() {
			// if(uni.getStorageSync('vipType').vipendtime == '审核会员'){
			// 	// 	uni.removeStorageSync('vipType')
			// }
			// vipType()
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
			this.isLogin = isLogin();
			if (this.isLogin) {
				this.UserProfile = uni.getStorageSync('UserProfile');
				this.userid = uni.getStorageSync('baseinfopro').userid;
				this.vip = uni.getStorageSync('vipType');
			}
			let pp = tt.getEnvInfoSync().microapp.mpVersion
			if (tt.getEnvInfoSync().microapp.mpVersion) {
				this.version = 'v' + pp
			}
			grayControl()
			this.getFrequency()
		},
		onLoad() {
			grayControl()
			setInterval(() => {
				this.refreshNum()
			}, 5 * 60 * 60 * 1000)
		},
		onShareAppMessage: function() {
			return {
				title: 'AI写作神器，输入需求，一键生成文案。',
				imageUrl: '/static/other/share.png'
			};
		},
		onShareTimeline: function(res) {},
		methods: {
			//测试次数
			feact() {
				let prams = {
					coins: 30,
					descinfo: '测试次数'
				}
				console.log('这个触发了吗')
				apiMixUrlKeyApi(prams, '1031', 'EarnCoins').then(res => {
					uni.setStorageSync('frequencyrs', res.data.coins)
				})
			},
			// 获取剩余次数
			getFrequency() {
				let that = this
				apiMixUrlApi({}, 1042, 'GetPaymentInfo').then(data => {
					console.log(data, '0000000-------')
					if (data.descinfo == "success") {
						if (data.coins > 0) {
							that.coins = data.coins;
							uni.setStorageSync('frequencyrs', data.coins)
						} else {
							that.coins = 0;
							uni.setStorageSync('frequencyrs', data.coins)
							// uni.setStorageSync('frequencyrs', 0)
						}
					}
				});
			},
			//弹窗
			toggle() {
				uni.navigateTo({
					url: '/pages/service/service'
				})
			},
			close() {
				this.$refs.popup.close()
			},
			goMoney() {
				uni.navigateTo({
					url: '/pages_aiTools/creation/creation'
				})
			},
			//点击跳转我的文案
			gomytitle() {
				uni.navigateTo({
					url: '/pages_aiTools/mytitle/mytitle'
				})
			},
			// 连续点击头像15次获取测试次数
			remote() {
				let that = this
				that.tit++

				if (that.tit == 15) {
					if (uni.getStorageSync('poptitle')) {
						uni.showToast({
							title: '暂无资格',
							icon: 'none'
						})
						that.tit = 0
					} else {
						uni.showModal({
							title: '提示',
							content: '点击确认获取测试次数',
							showCancel: true,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									that.tit = 0
									that.feact()
									that.getFrequency()
									uni.setStorageSync("poptitle", 1);

								} else if (res.cancel) {
									console.log('用户点击取消');
									that.tit = 0
								}
							}
						});
					}

				}
			},
			// 复制ID
			copyId(e) {
				uni.setClipboardData({
					data: e, // e是需要设置的内容
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			},
			refreshNum: function() {
				if (this.refresh == '刷新会员') {
					var _this = this;
					let interval = null;
					vipType(false);
					let currentTime = _this.currentTime;
					interval = setInterval(function() {
						currentTime--;
						_this.refresh = currentTime;
						_this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
						_this.vip = uni.getStorageSync('vipType')
						if (currentTime <= 0) {
							clearInterval(interval);
							_this.refresh = '刷新会员';
							_this.currentTime = 11;
						}
					}, 1000);
				}
			},
			/*
			 *	@	跳转到会员中心
			 */
			goMember() {
				/* 跳转到会员中心 */
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '../paymentCenter/paymentCenter'
					});
				} else {
						uni.showModal({
							title: '提示',
							content: '由于相关规范，IOS功能暂不可用',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						}
			},
			goService() {

			},
			/*
			 *	@	跳转到消费记录
			 */
			goConsumption() {
				uni.navigateTo({
					url: '../consumption/consumption'
				});
			},
			/*
			 *	@	跳转帮助
			 */
			goHelp() {
				uni.navigateTo({
					url: '../help/help'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	#btn {
		width: 80%;
		height: 50rpx;
		background-color: #fff;
		opacity: 0;
		transform: translateY(-70rpx);
	}

	/deep/.u-line {
		border: none !important;
	}

	/deep/.u-icon__img {
		margin-right: 30rpx;
	}

	/deep/.u-cell-group__wrapper {
		padding-top: 30rpx;
		box-sizing: border-box;
	}

	/deep/.u-cell {
		height: 97rpx;
	}

	/deep/.u-icon__icon {
		font-size: 12px !important;
	}

	.vip-s {
		height: 124rpx;
		width: 696rpx;
		margin: auto;
		background: white;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;

		image {
			width: 88rpx;
			height: 88rpx;
		}

		text {
			margin-left: 20rpx;
		}
	}

	.vip-s_left {
		display: flex;
		width: 345rpx;
		align-items: center;
		justify-content: center;

		text {
			font-size: 29rpx;
		}
	}

	.vip-s_right {
		display: flex;
		width: 345rpx;
		align-items: center;
		justify-content: center;

		text {
			font-size: 29rpx;
		}
	}

	.enlighten_vip {
		position: relative;
		width: 700rpx;
		margin: 20rpx auto;
		margin-top: 50rpx;
		box-sizing: border-box;
		// background: white;

		image {
			width: 100%;
			height: 100%;
		}

		.enlighten_vip_left {
			top: 30rpx;
			left: 100rpx;
			position: absolute;
			display: flex;
			flex-direction: column
		}

		.txt_b {
			margin-top: 15rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.txt_t {
			font-weight: 800;
			color: #FFFFFF;
			font-size: 36rpx;
			font-family: PingFang SC-Heavy, PingFang SC;
			font-weight: 800;
		}



		.button {
			position: absolute;
			top: 70rpx;
			right: 110rpx;
			font-size: 22rpx;
			color: #333333;

			.txt_b {
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 0rpx;
			}
		}
	}

	.u-slot-value {
		width: 87rpx;
		height: 38rpx;
	}

	.enlighten_vip {
		position: relative;
		width: 700rpx;
		margin: 20rpx auto;
		margin-top: 40rpx;
		box-sizing: border-box;

		image {
			width: 100%;
			height: 100%;
		}

		.button {
			position: absolute;
			top: 36rpx;
			right: 39rpx;
			font-size: 22rpx;
			border-radius: 27rpx;
			color: #333333;
			background-color: #fff;
		}
	}

	.cell_group {
		width: 680rpx;
		height: 340rpx;
		margin: auto;
		margin-top: 42rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
	}

	.login {
		display: flex;
		align-items: center;
		margin-bottom: 0rpx;
		margin-top: 20px;

		.login_portrait {
			margin: 0rpx 42rpx;
			width: 116rpx;
			height: 116rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.login_portrait_text {
			.login_portrait_text_ID {
				font-size: 35rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 10rpx;
			}

			.login_portrait_text_VIP {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-top: 16rpx;
			}
		}

		.refresh {
			margin-left: 100rpx;
			font-size: 22rpx;
			width: 140rpx;
			height: 40rpx;
			border: 1rpx solid #6b9cff;
			border-radius: 12rpx;
			line-height: 40rpx;
			text-align: center;
			color: #6b9cff;
		}
	}

	.box {
		height: 100vh;
		background-color: #f4f4f4;
		overflow: hidden;
	}

	.version {
		height: 30px;
		width: 90%;
		position: fixed;
		margin: auto;
		bottom: 0;
		/*底部固定*/
		left: 0;
		/*实现div的居中*/
		right: 0;
		/*实现div的居中*/
		text-align: center;
		/*div的内容居中*/
		color: #666666;
		line-height: 30px;
		/*垂直居中*/
	}
</style>